<h1 class="page-title">
  <span class="text-truncate">
    Task <strong *ngIf="task">{{ task.name }}</strong>
  </span>
</h1>

<div *ngIf="!loading">
  <div class="datagrid-action-bar">
    <button type="button" class="btn btn-sm btn-secondary" (click)="launch()" [appRole]="['ROLE_DEPLOY']">
      Launch task
    </button>
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="schedule()"
      [appRole]="['ROLE_SCHEDULE']"
      appFeature="schedules"
    >
      Schedule
    </button>
    <button type="button" class="btn btn-sm btn-secondary" grafanaDashboardTask [task]="task">Grafana Dashboard</button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="destroy()" [appRole]="['ROLE_DESTROY']">
      Destroy task
    </button>
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="cleanup()" [appRole]="['ROLE_DESTROY']">
      Cleanup
    </button>
  </div>

  <div class="clr-row">
    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Information" keyContext="task" name="{{ task.name }}" id="info">
        <ng-template>
          <div class="block card-block-keyvalue">
            <div *ngIf="task.description" class="row">
              <div class="key">Description</div>
              <div class="value">{{ task.description }}</div>
            </div>
            <div class="row">
              <div class="key">Definition</div>
              <div class="value">
                <span class="dsl-text">{{ task.dslText }}</span>
              </div>
            </div>
            <div class="row">
              <div class="key">Status</div>
              <div class="value">
                <span class="{{ task.labelStatusClass() }}">{{ task.status }}</span>
              </div>
            </div>
            <div class="row">
              <div class="key">Applications</div>
              <div class="value">
                <div *ngIf="!loadingApplications">
                  <div *ngFor="let app of applications">
                    <strong>{{ app.name }}</strong
                    >&nbsp;
                    <span class="label label-app {{ app.type }}">{{ app.origin }}</span>
                  </div>
                </div>
                <div *ngIf="loadingApplications">
                  <clr-spinner clrInline clrSmall></clr-spinner>
                  Loading application(s)...
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </app-view-card>
    </div>

    <div class="clr-col-lg-12 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Show Data Pipeline" keyContext="task" name="{{ task.name }}" id="visualize">
        <ng-template>
          <app-task-flo-view [dsl]="task.dslText"></app-task-flo-view>
        </ng-template>
      </app-view-card>
    </div>

    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Last execution" keyContext="task" name="{{ task.name }}" id="execution">
        <ng-template>
          <div class="block card-block-keyvalue lg-key">
            <div *ngIf="task.lastTaskExecution">
              <div class="row">
                <div class="key">Execution Id</div>
                <div class="value">{{ task.lastTaskExecution.executionId }}</div>
              </div>
              <div class="row">
                <div class="key">Arguments</div>
                <div class="value">
                  <div *ngIf="task.lastTaskExecution.getArgumentsToArray().length > 0">
                    <div *ngFor="let arg of task.lastTaskExecution.getArgumentsToArray()">
                      {{ arg[0] }}:
                      <strong>{{ arg[1] }}</strong>
                    </div>
                  </div>
                  <div *ngIf="task.lastTaskExecution.getArgumentsToArray().length === 0">N/A</div>
                </div>
              </div>
              <div class="row">
                <div class="key">External Execution Id</div>
                <div class="value">
                  {{ task.lastTaskExecution.externalExecutionId || 'N/A' }}
                </div>
              </div>
              <div class="row">
                <div class="key">Batch Job</div>
                <div class="value">
                  <clr-icon
                    *ngIf="task.lastTaskExecution.jobExecutionIds?.length > 0"
                    shape="success-standard"
                  ></clr-icon>
                  <clr-icon
                    *ngIf="task.lastTaskExecution.jobExecutionIds?.length === 0"
                    shape="times-circle"
                  ></clr-icon>
                </div>
              </div>
              <div class="row">
                <div class="key">Job Execution Ids</div>
                <div class="value">
                  <a
                    [routerLink]="'/jobs/executions/' + jobExecutionId"
                    *ngFor="let jobExecutionId of task.lastTaskExecution.jobExecutionIds"
                  >
                    {{ jobExecutionId }}
                  </a>
                  <div *ngIf="task.lastTaskExecution.jobExecutionIds?.length === 0">N/A</div>
                </div>
              </div>
              <div class="row">
                <div class="key">Start Time</div>
                <div class="value">
                  {{ task.lastTaskExecution.startTime | datetime }}
                </div>
              </div>
              <div class="row">
                <div class="key">End Time</div>
                <div class="value">
                  {{ task.lastTaskExecution.endTime | datetime }}
                </div>
              </div>
              <div class="row">
                <div class="key">Duration</div>
                <div class="value">
                  {{ task.lastTaskExecution.startTime | duration: task.lastTaskExecution.endTime }}
                </div>
              </div>
              <div class="row">
                <div class="key">Exit Code</div>
                <div class="value">
                  {{ task.lastTaskExecution.exitCode }}
                </div>
              </div>
              <div class="row">
                <div class="key">Exit Message</div>
                <div class="value">
                  {{ task.lastTaskExecution.exitMessage || 'N/A' }}
                </div>
              </div>
              <div class="row">
                <div class="key">Resource URL</div>
                <div class="value">
                  {{ task.lastTaskExecution.resourceUrl || 'N/A' }}
                </div>
              </div>
              <div class="row">
                <div class="key">Application Properties</div>
                <div class="value">
                  <div *ngIf="task.lastTaskExecution.getAppPropertiesToArray().length > 0">
                    <div *ngFor="let arg of task.lastTaskExecution.getAppPropertiesToArray()">
                      {{ arg.key }}:
                      <strong>{{ arg.value }}</strong>
                    </div>
                  </div>
                  <div *ngIf="task.lastTaskExecution.getAppPropertiesToArray().length === 0">N/A</div>
                </div>
              </div>
              <div class="row">
                <div class="key">Platform Properties</div>
                <div class="value">
                  <div *ngIf="task.lastTaskExecution.getDeploymentPropertiesToArray().length > 0">
                    <div *ngFor="let arg of task.lastTaskExecution.getDeploymentPropertiesToArray()">
                      {{ arg[0] }}:
                      <strong>{{ arg[1] }}</strong>
                    </div>
                  </div>
                  <div *ngIf="task.lastTaskExecution.getDeploymentPropertiesToArray().length === 0">N/A</div>
                </div>
              </div>
            </div>
            <div *ngIf="!task.lastTaskExecution">No execution yet.</div>
          </div>
        </ng-template>
        <div class="card-footer" *ngIf="task.lastTaskExecution">
          <button class="btn btn-sm btn-secondary" (click)="navigateExecution(task.lastTaskExecution.executionId)">
            View task execution
          </button>
          <button
            class="btn btn-sm btn-secondary"
            *ngIf="hasLog(task.lastTaskExecution)"
            (click)="openLog(task.lastTaskExecution)"
          >
            View log
          </button>
        </div>
      </app-view-card>
    </div>

    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12">
      <app-view-card titleModal="Latest execution(s)" keyContext="task" name="{{ task.name }}" id="executions">
        <ng-template>
          <div *ngIf="!loadingExecution">
            <table class="table table-noborder table-compact" style="margin: 0" *ngIf="executions?.total > 0">
              <thead>
                <tr>
                  <th class="left" nowrap="">Execution ID</th>
                  <th class="left" nowrap="">Start time</th>
                  <th class="left" nowrap="">End time</th>
                  <th class="left" nowrap="">Duration</th>
                  <th class="left" nowrap="">Exit code</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let execution of executions?.items">
                  <td class="left">
                    <a routerLink="/tasks-jobs/task-executions/{{ execution.executionId }}">{{
                      execution.executionId
                    }}</a>
                  </td>
                  <td class="left">{{ execution.startTime | datetime }}</td>
                  <td class="left">{{ execution.endTime | datetime }}</td>
                  <td class="left">{{ execution.startTime | duration: execution.endTime }}</td>
                  <td class="left">{{ execution.exitCode }}</td>
                </tr>
              </tbody>
            </table>
            <div *ngIf="!executions?.total">No execution yet.</div>
          </div>
          <div *ngIf="loadingExecution">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading execution(s)...
          </div>
        </ng-template>
      </app-view-card>
    </div>

    <div class="clr-col-lg-6 clr-col-md-12 clr-col-12" *ngIf="scheduleEnabled">
      <app-view-card titleModal="Schedule(s)" keyContext="task" name="{{ task.name }}" id="schedules">
        <ng-template>
          <div *ngIf="!loadingSchedules">
            <table class="table table-noborder table-compact" style="margin: 0" *ngIf="schedules?.total > 0">
              <thead>
                <tr>
                  <th class="left" nowrap="">Name</th>
                  <th class="left" nowrap="">Platform</th>
                  <th class="left" nowrap="">Cron Expression</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let schedule of schedules?.items">
                  <td class="left">
                    <a routerLink="/tasks-jobs/schedules/{{ schedule.name }}/{{ schedule.platform }}">{{
                      schedule.name
                    }}</a>
                  </td>
                  <td class="left">{{ schedule.platform }}</td>
                  <td class="left">{{ schedule.cronExpression }}</td>
                </tr>
              </tbody>
            </table>
            <div *ngIf="!schedules?.total">No schedule yet.</div>
          </div>
          <div *ngIf="loadingSchedules">
            <clr-spinner clrInline clrSmall></clr-spinner>
            Loading schedule(s)...
          </div>
        </ng-template>
      </app-view-card>
    </div>
  </div>
</div>

<div *ngIf="loading" style="padding: 1rem 0">
  <clr-spinner clrInline clrSmall></clr-spinner>
  Loading task...
</div>

<app-task-destroy #destroyModal (onDestroyed)="back()"></app-task-destroy>
<app-task-execution-log #logModal></app-task-execution-log>
<app-task-cleanup #cleanupModal></app-task-cleanup>
